{% extends 'articles/base.html' %}

{% block content %}
<h1>文章列表</h1>
<ul class="article-list">
    {% for article in articles %}
    <li class="article-item">
        <a href="{% url 'articles:article_detail' article.pk %}">{{ article.title }}</a>
        <span class="article-date">{{ article.created_at|date:"Y-m-d" }}</span>
    </li>
    {% empty %}
    <li>暂无文章</li>
    {% endfor %}
</ul>
{% endblock %}

{% block extra_css %}
<style>
.article-list {
    list-style: none;
    padding: 0;
    max-width: 900px;
    margin: 0 auto;
}
.article-item {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}
.article-item:hover {
    background: #f9f9f9;
}
.article-date {
    color: #999;
    font-size: 0.9em;
}
</style>
{% endblock %}
